<template>
  <div>
    <el-input
      v-bind="$props"
      icon="edit"
      :on-icon-click="handleIconClick"
      :value="currentValue"
      :readonly="true">
    </el-input>
    <div v-model="activeNames" v-if="activeCollapse">
      <h2>map编辑 <i class="el-icon-plus" @click="add"></i> <i class="editor-icon-send-off" @click="save"></i></h2>
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item v-for="(item,index) in dynamicValidateForm.formData"  >
          <div style="display: table-cell;">
            <el-input v-model="item.key">
              <template slot="prepend">key:</template>
            </el-input>
          </div>
          <div style="display: table-cell;">
            <el-input v-model="item.value">
              <template slot="prepend">value:</template>
            </el-input>
          </div>
          <div style="display: table-cell;">
            <i class="el-icon-minus" @click="del(index)"></i>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
  export default{
    name: 'AppMap',
    componentName: 'AppMap',
    props: ['result', 'options'],
    data () {
      return {
        activeNames: '',
        activeCollapse: true,
        form: '',
        dynamicValidateForm: {
          formData: []
        },
        setting: [{}]
      }
    },
    methods: {
      handleIconClick () {
        this.activeCollapse = !this.activeCollapse
      },
      add () {
        this.dynamicValidateForm.formData.push({key: '', value: ''})
        event.preventDefault()
      },
      del (index) {
        this.dynamicValidateForm.formData.splice(index, 1)
      },
      save () {
        const _result = {}
        this.dynamicValidateForm.formData.forEach(item => {
          _result[item.key] = item.value
        })
        this.result[this.options.key] = _result
        this.activeCollapse = false
        this.$emit('input', _result)
      },
      change (obj, arrs = []) {
        Object.keys(obj).forEach(key => {
          arrs.push({key, value: obj[key]})
        })
        return arrs
      }
    },
    computed: {
      currentValue () {
        return JSON.stringify(this.result[this.options.key])
      }
    },
    mounted () {
      console.log(this.result, this.options)
      this.dynamicValidateForm.formData = this.change(this.result[this.options.key]) || []
    }
  }
</script>
